<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar class="bar" title="分类" />
    <!-- 菜单 -->
    <menu>
      <!-- 左侧菜单 -->
      <LeftMenu :leftData="state.leftData" @rightdata="rightdata" />
      <!-- 右侧菜单 -->
      <RightMenu @scroll="scroll" :rightData="state.rightData" />
    </menu>
  </div>
</template>

<script setup>
// 组件
import LeftMenu from "./menu/LeftMenu.vue";
import RightMenu from "./menu/RightMenu.vue";
import { category } from "@/utils/http.js";
import { reactive } from "vue";
import { onMounted, ref } from "@vue/runtime-core";
const state = reactive({
  leftData: [],
  rightData: [],
  scroll:null
});
// 获取数据
const getcategory = async () => {
  const { data: res } = await category();
  if (!res.success) return Notify("加载数据失败");
  state.leftData = res.data.category.list;
};

getcategory();
// 右侧数据通过点击发送
const rightdata = (list) => {
  state.rightData = list;
  state.scroll.scrollTo(0, 0, 300);
};
const scroll = (item) => {
  state.scroll = item
};
</script>
<style lang="scss" scoped>
menu {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
</style>
